{% extends "base.html" %}
{% load cms_tags %}
{% load i18n %}

{% block extra_js %}
<script type="text/javascript">
function initialize() {
	var mapOptions = {
		zoom: 16,
		center: new google.maps.LatLng( {{ event.fieldLat }}, {{ event.fieldLng }} ),
		mapTypeId: google.maps.MapTypeId.ROADMAP,
		scrollwheel: false,
	}
	var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
	
	var marker = new google.maps.Marker({
                            position: new google.maps.LatLng({{ event.fieldLat }}, {{ event.fieldLng }}),
							title: '{{ event.fieldName }}',
                            map: map
							});
}
function loadScript() {
	var script = document.createElement("script");
	script.type = "text/javascript";
	script.src = "http://maps.googleapis.com/maps/api/js?sensor=false&callback=initialize";
	document.body.appendChild(script);
}
window.onload = loadScript;
</script>
{% endblock %}

{% block base_content %}
	<div class="container">
	{% include "component/event/event-breadcrumb-desc.html" %}
		<div class="row">
			<div class="col-md-12">
				<!-- content -->
				<div class="page-header">
					<h3 class="text-info">{{ event.name }}</h3>
				</div>
			</div>
		</div>
		{% include "component/event/event-info-descript.html" %}
		<!-- event specific description -->
		<div class="page-header"></div>
		<div class="row">
			<div class="col-md-12">
				<h5 class="text-info"><strong>{% trans "More Information"%}</strong></h5>
			</div>	
		</div>
		<div class="row">
			<div class="col-md-12">
				<dl class="dl-horizontal">
					<dt>{% trans "Location" %}</dt>
					<dd>{{ event.fieldAddress }}</dd>
					<dt>{% trans "Race limit" %}</dt>
					<dd>{{ event.runnerLimit }}</dd>
					<dt>{% trans "Entry fee" %}</dt>
					{% if event.fee|floatformat == '0' %}
					<dd>{% trans "Free" %}</dd>
					{% else %}
					<dd>{{ event.fee|floatformat }} {% trans "$ NTD" %}</dd>
					{% endif %}
				</dl>
			</div>
		</div>
		{% include "component/event/event-info-attention-detail.html" %}
	</div>
{% endblock %}